<template>
  <div class="content-container" v-loading="quoteFormLoading">
    <el-row class="header-filter four-border-blueBg" style="height: 50px;line-height: 50px;">
      <el-page-header :title="$t('public.back')" @back="handleBack" style="padding: 0;" :icon="ArrowLeft">
        <template #content>
          <span style="font-size: 14px;">{{ $t('travelAgency.generateQuote') }}</span>
        </template>
      </el-page-header>
    </el-row>
    <div class="container">
      <div class="four-border-blueBg route_detail">
        <el-descriptions :column="2" border :label-width="100">
          <el-descriptions-item width="200" v-if="route.query.type==='team'">
            <template #label>{{ $t('travelAgency.departureDate') }}</template>
            {{ g_dayjs(formData.startTime).format('YYYY-MM-DD HH:mm:ss') || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200" v-if="route.query.type==='team'">
            <template #label>{{ $t('travelAgency.departureNumber') }}</template>
            {{ formData.peopleCountPlan || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200" v-if="route.query.type==='route'">
            <template #label>{{ $t('travelAgency.departureNumber') }}</template>
            {{ formData.teamPeopleCount || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('travelAgency.departureDays') }}</template>
            {{ formData.days || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200" v-if="route.query.type==='route'">
            <template #label>{{ $t('travelAgency.departureCity') }}</template>
            <template #default>
              <span>{{ g_utils.getRegionName(formData.startRegionCode) }}</span>
            </template>
          </el-descriptions-item>
        </el-descriptions>
        <el-form ref="refDialogForm" v-loading="formLoading" :label-width="language === 'en' ? '180px' : '80px'"
          :model="tripFormData" style="margin-top: 10px">
          <div class="tabs-container">
            <el-tabs v-model="tabValue" style="flex: 1" @tab-change="handleTabChange">
              <el-tab-pane v-for="item in g_options.lineTypeOptions" :key="item.value" :name="item.value"
                :label="item.label" class="tab_item">
                <el-form-item :label="$t('travelAgency.description')" prop="fileContent"
                  v-if="item.value!=='8'&&item.value!=='3'">
                  <TextInput v-model="tripFormData.fileContent[item.value].remark" type="textarea" clearable :rows="5"
                    :placeholder="$t('public.null')" disabled :label="$t('travelAgency.description')" />
                </el-form-item>
                <div v-if="item.value==='3'">
                  <BaseTable ref="refTravelTable" :data="routeTrips" row-key="id" style="margin: 10px 0">
                    <TableColumn prop="dayIndex" :label="$t('travelAgency.tripDay')" v-if="route.query.type==='route'"
                      :column-width="travelColumnWidth.through" />
                    <TableColumn :label="$t('fleet.departure')" class="ignore">
                      <TableColumn prop="startRegionCode" :label="$t('public.region')"
                        :column-width="travelColumnWidth.startRegionCode">
                        <template #default="{ row }">
                          <span>{{ g_utils.getRegionName(row.startRegionCode) }}</span>
                        </template>
                      </TableColumn>
                      <TableColumn prop="startAddress" :label="$t('public.detailAddress')"
                        :column-width="travelColumnWidth.startAddress" />
                    </TableColumn>
                    <TableColumn :label="$t('fleet.destination')" class="ignore">
                      <TableColumn prop="endRegionCode" :label="$t('public.region')"
                        :column-width="travelColumnWidth.endRegionCode">
                        <template #default="{ row }">
                          <span>{{ g_utils.getRegionName(row.endRegionCode) }}</span>
                        </template>
                      </TableColumn>
                      <TableColumn prop="endAddress" :label="$t('public.detailAddress')"
                        :column-width="travelColumnWidth.endAddress" />
                    </TableColumn>
                    <TableColumn prop="startTime" :label="$t('fleet.departureTime')"
                      :column-width="travelColumnWidth.startTime" v-if="route.query.type==='team'" />
                    <TableColumn prop="endTime" :label="$t('public.endTime')" :column-width="travelColumnWidth.endTime"
                      v-if="route.query.type==='team'" />
                    <TableColumn prop="through" :label="$t('fleet.passingScenery')"
                      :column-width="travelColumnWidth.through" />
                  </BaseTable>
                </div>
                <div v-if="item.value==='8'">
                  <el-table :data="totleTable" style="width: 100%;margin-top: 10px;" border v-if="totleTable.length"
                    class="total_excel" :span-method="handleSpanMethod">
                    <el-table-column prop="tripDate" :label="$t('travelAgency.date')" width="100" align="center" />
                    <el-table-column prop="tripDay" :label="$t('travelAgency.tripDay')" width="70" align="center" />
                    <el-table-column prop="trip" width="210" :label="$t('travelAgency.trip')" align="center" />
                    <el-table-column prop="type" width="60" :label="$t('travelAgency.type')"
                      align="center"></el-table-column>
                    <el-table-column prop="content" :label="$t('travelAgency.resource')"
                      align="center"></el-table-column>
                  </el-table>
                  <el-empty :description="$t('travelAgency.noData')" v-else />
                </div>
                <div v-if="tripFormData.fileContent[item.value] && tripFormData.fileContent[item.value].fileId">
                  <el-button text @click="handleDownload(item)">{{ $t('travelAgency.downloadFile') }}</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-form>
      </div>
      <div class="four-border-blueBg quote_detail">
        <el-form ref="refQuoteForm" class="set-dialog-form" :label-width="language === 'en' ? '180px' : '80px'"
          :model="quoteFormData" :rules="quoteRules" :disabled=" route.query.handleType==='detail'">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('travelAgency.templateName')" prop="name">
                <el-select v-model="quoteFormData.name" :placeholder="$t('public.pleaseSelect')"
                  @change="handleQuoteChange">
                  <el-option v-for="item in quoteList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('travelAgency.tripDays')" prop="tripDays">
                <TextInput v-model="quoteFormData.tripDays" verify-type="nzint" clearable
                  :label="$t('travelAgency.tripDays')" :maxlength="4" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('travelAgency.defaultPersonCount')" prop="peopleCount">
                <TextInput v-model="quoteFormData.peopleCount" verify-type="nzint" clearable
                  :label="$t('travelAgency.defaultPersonCount')" :maxlength="4" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item required>
                <template #label>
                  <label>{{ $t('travelAgency.applicableAge') }}</label>
                </template>
                <div style="display: flex; align-items: center">
                  <el-form-item prop="ageMin">
                    <TextInput v-model="quoteFormData.ageMin" verify-type="int" clearable
                      :label="$t('travelAgency.applicableAge')" :maxlength="3" />
                  </el-form-item>
                  <span style="width: 50px; text-align: center"> -- </span>
                  <el-form-item prop="ageMax">
                    <TextInput v-model="quoteFormData.ageMax" verify-type="int" clearable
                      :label="$t('travelAgency.applicableAge')" :maxlength="3" />
                  </el-form-item>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0" class="form-item-table" prop="itemList">
                <BaseTable ref="refQuoteTable" :data="quoteTableData" row-key="id"
                  style="width: 100%;max-height: 500px;overflow-y: auto;" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <TableColumn prop="day" :label="$t('travelAgency.days')" :column-width="routeColumnWidth.day">
                    <template #default="{ row }">
                      <span>{{
                        g_t('travelAgency.dayI', {
                        i: g_nzhcn.encodeS(row.day)
                        })
                        }}</span>
                    </template>
                  </TableColumn>
                  <TableColumn prop="address" :label="$t('travelAgency.location')"
                    :column-width="routeColumnWidth.address" />
                  <TableColumn prop="name" :label="$t('travelAgency.project')" :column-width="routeColumnWidth.name" />
                  <TableColumn prop="type" :label="$t('travelAgency.type')" :column-width="routeColumnWidth.type">
                    <template #default="{ row }">
                      <span>{{
                        g_options.getOptionText(
                        g_options.costItemTypeOptions,
                        row.type,
                        '--'
                        )
                        }}</span>
                    </template>
                  </TableColumn>
                  <TableColumn prop="count" :label="$t('travelAgency.quantity')" :column-width="routeColumnWidth.count">
                    <template #default="{ row }">
                      <div style="
                          display: flex;
                          justify-content: center;
                          align-items: center;
                        ">
                        <span>{{ row.count }}</span>
                        <el-tooltip v-if="row.countFlag" :content="$t('travelAgency.followGroupSize')" placement="top"
                          effect="light">
                          <el-icon><i-ep-QuestionFilled /></el-icon>
                        </el-tooltip>
                      </div>
                    </template>
                  </TableColumn>
                  <TableColumn prop="price" :label="$t('hotel.unitPrice')" :column-width="routeColumnWidth.price" />
                  <TableColumn prop="exchangeRate" :label="$t('travelAgency.exchangeRate')" max-width="60"
                    :column-width="routeColumnWidth.exchangeRate" />
                  <TableColumn prop="totalPrice" :label="$t('travelAgency.totalPrice')" min-width="100"
                    :column-width="routeColumnWidth.totalPrice" />
                  <TableColumn prop="perCapitaPrice" :label="$t('travelAgency.perCapitaPrice')" min-width="100"
                    :column-width="routeColumnWidth.perCapitaPrice" />
                  <TableColumn fixed="right" prop="action" :label="$t('public.action')" min-width="190"
                    :column-width="routeColumnWidth.action"
                    v-if="route.query.handleType==='add'|| route.query.handleType==='edit'">
                    <template #default="{ row, $index }">
                      <el-button text @click="handleEditCostItem(row, $index)">
                        {{ $t('public.edit') }}
                      </el-button>
                      <el-button text @click="handleDeleteCostItem(row, $index)">{{
                        $t('public.delete')
                        }}</el-button>
                      <el-button text :disabled="!$index" @click="handleMoveUp(row, $index)">{{
                        $t('travelAgency.moveUp') }}</el-button>
                      <el-button text :disabled="$index === quoteTableData.length - 1"
                        @click="handleMoveDown(row, $index)">{{ $t('travelAgency.moveDown') }}</el-button>
                    </template>
                  </TableColumn>
                </BaseTable>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="form_footer">
      <div class="num">{{ $t('travelAgency.perCapitaTotalPrice') }}：{{ price.perPersonPrice}}</div>
      <div class="num" style="margin-bottom: 20px;">{{ $t('travelAgency.totalPrice') }}：{{ price.totalPrice }}</div>
      <el-button type="primary" @click="handleSubmitForm"
        v-if="route.query.handleType==='edit'|| route.query.handleType==='add'">{{ $t('public.save') }}</el-button>
    </div>
    <AddCostItem v-if="addCostItemVisible" v-model="addCostItemVisible" :row="costItem" type="edit"
      :tripDays="formData.tripDays" @update="handleUpdateTravelCb" />
  </div>
</template>

<script setup>
import AddCostItem from '@/views/travelAgency/costCalc/component/AddCostItem.vue'
import { ArrowLeft } from '@element-plus/icons-vue'
const route = useRoute()
const rowId = ref(route.query.id || '')
const totalFormData = ref({})
const viewLoading = ref(false)
const formData = ref({})
const refDialogForm = ref(null)
const formLoading = ref(false)
const fileContent = Object.fromEntries(
  g_options.lineTypeOptions.map(item => [
    item.value,
    { fileId: '', remark: '' }
  ])
)
const quoteID = ref('')
const tripFormData = ref({
  fileId: '',
  fileContent: g_.cloneDeep(fileContent)
})

const addCostItemVisible = ref(false)
const costItem = ref({})
const costItemTableIndex = ref(0)
const price = ref({
  perPersonPrice: 0,
  totalPrice: 0
})

const routeTrips = ref([])
const totleTable = ref([])
const refTravelTable = ref(null)
const travelColumnWidth = ref({})

const handleSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 日期、天数、行程列需要合并，每7行合并为1行
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    // 每7行的第一个行显示合并，其余6行隐藏
    if (rowIndex % 7 === 0) {
      return {
        rowspan: 7,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }

  // 其他列不合并
  return {
    rowspan: 1,
    colspan: 1
  }
}

const tabValue = ref(g_options.lineTypeOptions[0].value)

// 添加获取报价模板列表的方法
const getTemplateList = () => {
  g_api.travelAgency.apiCalculatorTemplateList()
    .then(({ code, data }) => {
      if (code === '200' && data) {
        quoteList.value = data
      }
    })
}

watch(
  () => tripFormData.value.fileId,
  nv => {
    refDialogForm.value.validateField(['fileId'])
  }
)

onMounted(() => {
  getFormData()
  getTemplateList()

  if (route.query.handleType === 'edit' || route.query.handleType === 'detail') {
    getQuoteDetail()
  }
})

watch(
  () => routeTrips.value,
  nv => {
    nextTick(() => {
      useTableColumnWidth({
        refTable: refTravelTable.value
      }).getTableColumnWidth(data => {
        travelColumnWidth.value = data
      })
    })
  },
  {
    deep: true
  }
)

const getQuoteDetail = () => {
  g_api.travelAgency.apiQuoteDetail(route.query.quoteId).then(({ code, data }) => {
    if (code === '200' && data) {
      quoteID.value = data.quote.id
      quoteFormData.value = { ...data.template, itemList: data.templateItems }
      price.value.totalPrice = parseFloat(data.quote.totalPrice.toFixed(2))
      price.value.perPersonPrice = parseFloat(data.quote.avgPrice.toFixed(2))

      nextTick(() => {
        data.templateItems.forEach((row, index) => {
          if (row.choose == 1) {
            refQuoteTable.value.refBaseTable.toggleRowSelection(row, true)
          }
        })
      })
    }
  })
}

// 计算表格数据
const quoteTableData = computed(() => {
  const { itemList, peopleCount } = quoteFormData.value
  return itemList.map(item => {
    let count = item.count
    if (item.count === '') {
      count = peopleCount
      item.countFlag = 1 // 0-不跟随出团人数，1-跟随出团人数
    }
    if (item.choose === undefined) item.choose = 0
    const totalPrice = g_utils.getFloat(count * item.price * item.exchangeRate)
    return {
      ...item,
      count,
      totalPrice,
      perCapitaPrice: peopleCount
        ? g_utils.getFloat(totalPrice / peopleCount)
        : '--'
    }
  })
})

const handleSelectionChange = (selectedRows) => {
  const selectedIds = selectedRows.map(row => row.id)
  quoteTableData.value.forEach(item => {
    item.choose = selectedIds.includes(item.id) ? 1 : 0
  })
  handlePrice(quoteTableData.value)
}

const handlePrice = (itemList) => {
  let total = 0
  let perPrice = 0

  itemList.forEach(item => {
    if (item.choose === 1) {
      // 累加总价
      total += parseFloat(item.totalPrice) || 0
      // 累加人均价
      perPrice += parseFloat(item.perCapitaPrice) || 0
    }
  })

  // 更新价格显示，保留两位小数并转换为数字类型
  price.value.totalPrice = parseFloat(total.toFixed(2))
  price.value.perPersonPrice = parseFloat(perPrice.toFixed(2))
}

const getFormData = () => {
  viewLoading.value = true
  const urlMethod =
    route.query.type === 'route'
      ? g_api.travelAgency.apiRouteDetail
      : g_api.travelAgency.apiTeamDetail
  urlMethod({ id: rowId.value })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
        routeTrips.value = data.routeTrips || data.tripList || []
        // 转换数据格式
        if (data.routeResourceTotals && data.routeResourceTotals.length > 0) {
          const convertedData = []
          data.routeResourceTotals.forEach(item => {
            // 根据7个类型转换为7条数据
            const types = [
              { type: g_t('travelAgency.meal'), key: 'meal' },
              { type: g_t('travelAgency.hotel'), key: 'hotel' },
              { type: g_t('travelAgency.car'), key: 'car' },
              { type: g_t('travelAgency.play'), key: 'play' },
              { type: g_t('travelAgency.shop'), key: 'shop' },
              { type: g_t('travelAgency.enjoy'), key: 'enjoy' },
              { type: g_t('travelAgency.other'), key: 'other' }
            ]

            types.forEach(typeInfo => {
              convertedData.push({
                tripDate: item.tripDate,
                tripDay: item.tripDay,
                trip: item.trip,
                type: typeInfo.type,
                content: item[typeInfo.key] || g_t('travelAgency.none'),
                routeId: item.routeId,
                tenantId: item.tenantId,
                id: item.id,
                rowId: item.rowId
              })
            })
          })
          totleTable.value = convertedData
        } else {
          totleTable.value = []
        }
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const getRouteResourceQuery = () => {
  formLoading.value = true
  const urlMethod =
    route.query.type === 'route'
      ? g_api.travelAgency.apiRouteResourceQuery
      : g_api.travelAgency.apiTeamRouteResourceQuery
  urlMethod({
    type: tabValue.value,
    [route.query.type === 'route' ? 'routeId' : 'teamId']: rowId.value
  })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tripFormData.value.fileContent[tabValue.value] = {
          ...data,
          updateStatus: true
        }
      }
    })
    .finally(_ => {
      formLoading.value = false
    })
}

const handleBack = () => {
  g_router.go(-1)
}

const handleTabChange = e => {
  if (!tripFormData.value.fileContent[e].updateStatus && tabValue.value !== '8') {
    getRouteResourceQuery()
  }
  refDialogForm.value.validateField(['fileContent'])
}

const handleDownload = item => {
  const { fileId, fileName } = tripFormData.value.fileContent[item.value]
  g_api.travelAgency
    .apiFileDownload({
      fileId
    })
    .then(res => {
      if (res.code === '200' && res.data) {
        g_utils.downloadFile(res.data, fileName)
      }
    })
    .finally(() => { })
}

const quoteList = ref([])
const refQuoteForm = ref(null)
const quoteFormLoading = ref(false)
const quoteFormData = ref({
  name: '',
  tripDays: '',
  peopleCount: '',
  ageMin: '',
  ageMax: '',
  totalPrice: 0,
  perPersonPrice: 0,
  itemList: []
})
const quoteRules = {
  name: g_rules.selectRule(g_t('travelAgency.templateName')),
  peopleCount: g_rules.commonInputText(g_t('travelAgency.defaultPersonCount')),
  ageMin: g_rules.startAge(quoteFormData.value, 'ageMax', refQuoteForm),
  ageMax: g_rules.endAge(quoteFormData.value, 'ageMin', refQuoteForm),
}
const refQuoteTable = ref(null)
const routeColumnWidth = ref({})

// 监听表格数据变化
watch(
  () => quoteTableData.value,
  nv => {
    setTimeout(() => {
      useTableColumnWidth({
        refTable: refQuoteTable.value
      }).getTableColumnWidth(data => {
        routeColumnWidth.value = data
      })
    })
  },
  {
    immediate: true,
    deep: true
  }
)

const handleEditCostItem = (row, i) => {
  addCostItemVisible.value = true
  costItem.value = row
  costItemTableIndex.value = i
}

const handleUpdateTravelCb = data => {
  quoteFormData.value.itemList = quoteTableData.value
  quoteFormData.value.itemList[costItemTableIndex.value] = data
  setTimeout(() => {
    quoteFormData.value.itemList.forEach((row, index) => {
      if (row.choose == 1) {
        refQuoteTable.value.refBaseTable.toggleRowSelection(row, true)
      }
    })
  }, 100)
}

const handleDeleteCostItem = (row, i) => {
  g_utils.deleteConfirm().then(() => {
    const selectedItems = quoteTableData.value.filter(item => item.choose === 1)
    quoteFormData.value.itemList.splice(i, 1)
    nextTick(() => {
      selectedItems.forEach((row, index) => {
        if (row.choose == 1) {
          refQuoteTable.value.refBaseTable.toggleRowSelection(row, true)
        }
      })
    })
    ElMessage.success(g_t('public.deleteSuccess'))
  }).catch(() => { })

}

const handleMoveUp = (row, i) => {
  const selectedItems = quoteTableData.value.filter(item => item.choose === 1)
  handleDeleteCostItem(row, i)
  quoteFormData.value.itemList.splice(i - 1, 0, row)

  nextTick(() => {
    selectedItems.forEach((row, index) => {
      if (row.choose == 1) {
        refQuoteTable.value.refBaseTable.toggleRowSelection(row, true)
      }
    })
  })
}

const handleMoveDown = (row, i) => {
  const selectedItems = quoteTableData.value.filter(item => item.choose === 1)
  handleDeleteCostItem(row, i)
  quoteFormData.value.itemList.splice(i + 1, 0, row)
  nextTick(() => {
    selectedItems.forEach((row, index) => {
      if (row.choose == 1) {
        refQuoteTable.value.refBaseTable.toggleRowSelection(row, true)
      }
    })
  })
}

// 报价模板选择变化
const handleQuoteChange = (val) => {
  g_api.travelAgency
    .apiCalculatorDetail({ templateId: val }).then(({ code, data }) => {
      if (code === '200') {
        quoteFormData.value = data
      }
    })
}


const handleSubmitForm = () => {
  if (quoteFormLoading.value) return
  refQuoteForm.value.validate(valid => {
    if (!valid) return
    quoteFormLoading.value = true
    let templateData = {
      ...quoteFormData.value,
      perPersonPrice: parseFloat(price.value.perPersonPrice) || 0,
      totalPrice: parseFloat(price.value.totalPrice) || 0
    }
    if (templateData.itemList) delete templateData.itemList
    totalFormData.value = {
      quote: {
        name: route.query.type === 'route' ? formData.value.name : formData.value.routeName,
        teamDate: g_dayjs(formData.value.startTime).format('YYYY-MM-DD HH:mm:ss') || '',
        persons: route.query.type === 'route' ? formData.value.teamPeopleCount : formData.value.peopleCountPlan,
        totalPrice: parseFloat(price.value.totalPrice) || 0,
        avgPrice: parseFloat(price.value.perPersonPrice) || 0,
        [route.query.type === 'route' ? 'routeId' : 'teamId']: rowId.value
      },
      template: templateData,
      templateItems: quoteTableData.value
    }

    if (route.query.handleType === 'edit') totalFormData.value.quote.id = quoteID.value


    const urlMethod = route.query.handleType === 'add'
      ? g_api.travelAgency.apiQuoteCreate
      : g_api.travelAgency.apiQuoteUpdate

    urlMethod(totalFormData.value).then((res) => {
      if (res.code === '200') {
        if (route.query.handleType === 'add') {
          ElMessage.success('新增成功')
        } else {
          ElMessage.success('编辑成功')
        }
        handleBack()
      }
    }).finally(() => {
      quoteFormLoading.value = false
    })
  })
}
</script>

<style>
.total_excel th.el-table__cell {
  background-color: transparent !important;
  font-size: 14px !important;
}


.total_excel {
  &.el-table {
    border: 1px solid #000;

    td,
    th {
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
    }

    th.el-table__cell.is-leaf {
      border-bottom: 1px solid #000;
    }

    &::before {
      background-color: #000;
      height: 1px;
    }
  }
}
</style>
<style scoped lang="scss">
.container {
  display: flex;
  width: 100%;
  height: calc(100% - 60px);

  .route_detail {
    width: 45%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
  }

  .quote_detail {
    width: 55%;
    padding: 15px;
    box-sizing: border-box;
  }
}

.tabs-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tab_item {
    min-height: 350px;
    max-height: 600px;
    padding-top: 10px;
    overflow-y: auto;
  }

  :deep(.el-tabs__nav.is-top) {
    width: 100%;
    justify-content: space-around;
  }
}

.form_footer {
  position: absolute;
  bottom: 20px;
  right: 20px;

  .num {
    font-size: 16px;
    padding: 5px;
  }
}
</style>